<template>

    <Filter :title="'轻小说列表'" :types="types" :itemValue="item => item.ntid" @filter="filter" />

    <Model :dataList="dataList" :Detail="Detail" style="padding-left: 0.1%;" />
</template>

<script setup lang="ts">
import Filter from '@/components/FilterVue.vue'
import Model from '@/components/ModelVue.vue';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios, { HttpStatusCode } from 'axios';

const router = useRouter();

onMounted(
    () => {
        getDataList()
        getTypeList();
    }
)

const types = ref<any[]>([])
const searchTypes = ref<Number[]>([]);

const getTypeList = async () => {
    try {
        const result = await axios.get('/api/novelType/list');
        if (result.data.code === HttpStatusCode.Ok) {
            types.value = result.data.data;
            console.log(types);
        }
    } catch (error) {
        ElMessage.error({
            showClose: true,
            message: "数据获取失败！！！",

        })
        console.log(error);
    }
}

const dataList = ref
    (
        [
            {
                "cid": 1,
                "name": "为美好世界献上祝福!",
                "types": ["日漫", "搞笑", "异世界"],
                "cover": "img/为美好世界献上祝福！.png",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "狐妖小红娘",
                "types": ["国漫", "搞笑", "恋爱"],
                "cover": "img/狐妖小红娘.jpg",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "火影忍者",
                "types": ["日漫", "热血"],
                "cover": "img/火影忍者.jpg",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },
            {
                "cid": 1,
                "name": "测试数据",
                "types": ["测试", "xx", "xx"],
                "cover": "......",
                "createTime": "2023-12-15T14:26:14",
                "updateTime": "2023-12-15T14:26:14",
                "status": 1
            },


        ]
    )


const getDataList = async () => {
    try {
        const types = searchTypes.value.join(",");
        const params = {
            types
        }
        console.log(params);

        const result = await axios.get('/api/novel', { params });
        if (result.data.code === 200) {
            dataList.value = result.data.data;
            console.log(dataList);
        }
    } catch (error) {
        ElMessage.error({
            showClose: true,
            message: "数据获取失败！！！"
        })
        console.log(error);
    }
}

const Detail = function (data) {
    console.log('nid : ' + data.nid);
    router.push({ name: 'novelDetail', params: { nid: data.nid } })
}

const filter = (filterTypes) => {
    searchTypes.value = filterTypes;
    getDataList();
}
</script>
